<template>
    <div class="header-box">
        <div class="title"> </div>
        <div class="menu-list flex">
            <div v-for="(item, index) in menuList" :key="index + 's'">
                <div @click="navRouter(item.name)" :class="activeIndex == 'productManage' ? 'active' : ''">{{ item.meta.name }}</div>
            </div>
        </div>
        <div  class="nav nav-right">
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <img src="../../../public/image/touxiang.jpg" alt="" style="width: 30px; margin-right: 5px;">  {{ userName }} <i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>修改密码</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    export default {
      name: 'headMenu',
      data() {
        return {
            routerName: '',
            menuRoute: {},
            activeIndex: "dutyManage",
            userName: "admin",
            menuList: []
        }
      },
      watch:{ },
      created(){
        this.routerName = this.$route.name //获取路由名称
      },
      mounted(){
        console.log(this.$router);
        this.menuList = this.$router.options.routes[1].children;
      },
      methods: {
        // 跳转页面
        navRouter(value){
            this.activeIndex = value;
            this.$router.push(`/${value}`)
            this.routerName = value
        }
      }
  }
</script>
<style lang="scss" scoped>
.header-box{
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    // background-color: #165DFF;
    padding: 0 20px;
    background-image: url(./image/head-blue.png);
    background-size: 100% 100%;
    // border-bottom: 1px solid #E5E7EB;
    .title{
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 32px;
        color: #F7FBFF;
    }


   .menu-list{
        display: flex;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #F7FBFF;
        // margin-top: 30px;
        >div{
            cursor: pointer;
            padding: 10px 40px;
            margin-left: 20px;
            background-image: url(../../../public/image/nav-bg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position-y: 8px;
            opacity: 0.9;

        }
        >div.active{
            background-image: url(../../../public/image/nav-action.png);
            background-size: 100% 100%;
        }
    }
    .el-dropdown{
        color:#fff
    }
    .el-dropdown-link{
        display: flex;
        align-items: center;
    }
}

</style>